<template>
  <div>
    <el-dialog title="场景管理" :visible.sync="setSceneDialogVisible" width="35%" v-loading="loading">
      <create-sections>
        <div class="tip-title" style="padding-bottom: 12px;">
          您可通过拖拽管理场景
        </div>
        <el-transfer class="custom-transfer" v-model="sceneValue" :data="tabs" :props="{ key: 'id', label: 'name' }" :titles="['显示的场景', '隐藏的场景']">
          <div slot-scope="{ option }">
            <div class="default-tranfer-item">
              <span><i class="el-icon-s-help" v-if="option.isDefault == 1"></i>{{ option.name }}</span>
              <div class="button-group">
                <em class="el-icon-edit" @click="btnEdit(option)" v-if="option.isSystem == '0'"></em>
                <em class="el-icon-delete" @click="btnDelete(option)" v-if="option.isSystem == '0'"></em>
                <el-dropdown @command="btnSet(option)">
                  <em class="el-icon-s-tools"></em>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="default">设置为默认场景</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

              </div>
            </div>
          </div>
        </el-transfer>

        <div class="tip-title" style="margin-top: 16px;cursor: pointer;" @click="addScene()">
          新建场景
        </div>
      </create-sections>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="btnSubmit">保 存</el-button>
        <el-button @click="setSceneDialogVisible = false" style="color: #5A607F;">取 消</el-button>
      </span>
    </el-dialog>
    <addScene ref="addScene" :addType="addType" @RefreshScene="RefreshScene" />
    <addClues ref="addClues" :addType="addType" @RefreshScene="RefreshScene" />
  </div>
</template>
<script>
import addScene from '@/components/clueManage/clues/addScene'
import addClues from '@/components/clueManage/clues/addClues'
import CreateSections from "@/components/CreateSections";
import { sceneConfig, querySceneConfig, deleteScene, setDefaultScene } from "@/api/customer/common";

export default {
  name: "sceneDialog",
  components: {
    addScene,
    addClues,
    CreateSections
  },
  props: {
    phone: String,
    addType: String,
  },
  data () {
    return {
      setSceneDialogVisible: false,
      sceneValue: [],
      tabs: [],
      loading: false,
    };
  },
  methods: {
    querySceneConfig () {
      this.loading = true;
      this.sceneValue = [];
      this.tabs = [];
      querySceneConfig(this.addType).then(res => {
        this.loading = false;
        this.sceneValue = [];
        this.tabs = res.data.value;
        if (res.data.hideValue && res.data.hideValue.length > 0) {
          this.tabs = this.tabs.concat(res.data.hideValue);
          res.data.hideValue.forEach(val => {
            this.sceneValue.push(val.id);
          })
        }
      }).catch(error => {
        this.loading = false;
      });

    },
    btnEdit (option) {
      this.$refs.addScene.init(option)
    },
    btnDelete (option) {
      this.$confirm("确定删除该场景吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          deleteScene(option.id).then(res => {
            this.loading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.querySceneConfig();
            this.$emit("RefreshScene");
          }).catch(error => {
            this.loading = false;
          });

        })
        .catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });

    },
    btnSet (option) {
      this.loading = true;
      setDefaultScene(option.id).then(res => {
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      })
    },
    btnSubmit () {
      let noList = [];
      this.tabs.forEach(element => {
        noList.push(element.id);
        var newArr = this.sceneValue.filter(function (item, index) {
          return item == element.id;  // 因为indexOf 只能查找到第一个  
        });
        if (newArr && newArr.length > 0) {
          noList.pop();
        }
      });
      var params = {
        noHideIds: noList,
        hideIds: this.sceneValue,
        type: this.addType
      }
      this.loading = true;
      sceneConfig(params).then(res => {
        this.$emit("RefreshScene");
        this.loading = false;
        this.setSceneDialogVisible = false;
      }).catch(error => {
        this.loading = false;
      })
    },
    RefreshScene () {
      this.querySceneConfig();
      this.$emit("RefreshScene");
    },
    addScene () {
      this.$refs.addScene.init()
    },
    btnAdd () {
      var item = {
        name: ""
      }
      this.list.push(item);
    },
    showFun () {
      this.querySceneConfig();
      this.setSceneDialogVisible = true;
    },
    closeFun () {
      this.setSceneDialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.tip-title {
  font-size: 14px;
  font-weight: 500;
  color: #344563;
}
::v-deep .el-transfer__buttons{
  .el-button:first-child{
    background-image: url("../../assets/images/left-transfer.png");
    background-size: cover;
    background-repeat: no-repeat;
    border: #fff solid 1px;
    background-color: #fff;
    .el-icon-arrow-left{
      display: none;
    }
  }
  .el-button{
    background-image: url("../../assets/images/right-transfer.png");
    background-size: cover;
    background-repeat: no-repeat;
    border: #fff solid 1px;
    background-color: #fff;
    .el-icon-arrow-right{
      display: none;
    }
  }
}

.default-tranfer-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .redIconMO {
    width: 10px;
    height: 10px;
    background: red;
  }

  .button-group {
    em {
      margin-right: 8px;
    }
  }
}

::v-deep .el-transfer-panel__item {
  width: 100%;
}

::v-deep .el-checkbox__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #344563 !important;
}
</style>